import React, { Component } from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/component/legend';
import  'echarts/lib/chart/bar';
import  'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import './App.css';
import {Icon} from "antd";

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      NavHide : {},
      ListWid : {width: 980},
      FirstBoxWidth: {width: 166},
      SecondBoxWidth: {width:193},
      ThirdBoxWidth: {width:245},
      NavIcoType1: "down",
      NavIcoType2: "down",
      NavIcoType3: "down",
      NavIcoType4: "down",
      NavIcoType5: "down",
      NavIcoType6: "down",
      NavIcoType7: "down",
      NavIcoType8: "down",
      NavItem1Style: {display:"none"},
      NavItem2Style: {display:"none"},
      NavItem3Style: {display:"none"},
      NavItem4Style: {display:"none"},
      NavItem5Style: {display:"none"},
      NavItem6Style: {display:"none"},
      NavItem7Style: {display:"none"},
      NavItem8Style: {display:"none"},
      NavisChange : false,
      NavItem1Open: false,
      NavItem2Open: false,
      NavItem3Open: false,
      NavItem4Open: false,
      NavItem5Open: false,
      NavItem6Open: false,
      NavItem7Open: false,
      NavItem8Open: false,
    };
    //也可以在这里设置绑定this
  };
  handelNavControlClick(){
    this.setState(()=>!this.state.NavisChange?{
      NavHide : {display:'none'},
      ListWid : {width: 1180},
      FirstBoxWidth: {width: 206},
      SecondBoxWidth: {width:233},
      ThirdBoxWidth: {width: 295},
      NavisChange : true
    }:{
      NavHide : {},
      ListWid : {width: 980},
      FirstBoxWidth: {width: 166},
      SecondBoxWidth: {width:193},
      ThirdBoxWidth: {width: 245},
      NavisChange: false
    });
  };
 
  handelNavItemControlClick1(){
    this.setState(()=>!this.state.NavItem1Open?{
      NavItem1Style: {listStyle:"none",padding:"0 0 0 40px"},
      NavIcoType1: "up",
      NavItem1Open: true
    }:{
      NavItem1Style: {display:"none"},
      NavIcoType1: "down",
      NavItem1Open: false
    });
  };
  handelNavItemControlClick2(){
    this.setState(()=>!this.state.NavItem2Open?{
      NavItem2Style: {listStyle:"none",padding:"0 0 0 40px"},
      NavIcoType2: "up",
      NavItem2Open: true
    }:{
      NavItem2Style: {display:"none"},
      NavIcoType2: "down",
      NavItem2Open: false
    });
  };
  handelNavItemControlClick3(){
    this.setState(()=>!this.state.NavItem3Open?{
      NavItem3Style: {listStyle:"none",padding:"0 0 0 40px"},
      NavIcoType3: "up",
      NavItem3Open: true
    }:{
      NavItem3Style: {display:"none"},
      NavIcoType3: "down",
      NavItem3Open: false
    });
  };
  handelNavItemControlClick4(){
    this.setState(()=>!this.state.NavItem4Open?{
      NavItem4Style: {listStyle:"none",padding:"0 0 0 40px"},
      NavIcoType4: "up",
      NavItem4Open: true
    }:{
      NavItem4Style: {display:"none"},
      NavIcoType4: "down",
      NavItem4Open: false
    });
  };
  handelNavItemControlClick5(){
    this.setState(()=>!this.state.NavItem5Open?{
      NavItem5Style: {listStyle:"none",padding:"0 0 0 40px"},
      NavIcoType5: "up",
      NavItem5Open: true
    }:{
      NavItem5Style: {display:"none"},
      NavIcoType5: "down",
      NavItem5Open: false
    });
  };
  handelNavItemControlClick6(){
    this.setState(()=>!this.state.NavItem6Open?{
      NavItem6Style: {listStyle:"none",padding:"0 0 0 40px"},
      NavIcoType6: "up",
      NavItem6Open: true
    }:{
      NavItem6Style: {display:"none"},
      NavIcoType6: "down",
      NavItem6Open: false
    });
  };
  handelNavItemControlClick7(){
    this.setState(()=>!this.state.NavItem7Open?{
      NavItem7Style: {listStyle:"none",padding:"0 0 0 40px"},
      NavIcoType7: "up",
      NavItem7Open: true
    }:{
      NavItem7Style: {display:"none"},
      NavIcoType7: "down",
      NavItem7Open: false
    });
  };
  handelNavItemControlClick8(){
    this.setState(()=>!this.state.NavItem8Open?{
      NavItem8Style: {listStyle:"none",padding:"0 0 0 40px"},
      NavIcoType8: "up",
      NavItem8Open: true
    }:{
      NavItem8Style: {display:"none"},
      NavIcoType8: "down",
      NavItem8Open: false
    });
  };

  componentDidMount() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("Bgraph"));
      // 绘制图表
      myChart.setOption({
          legend:{
            data:["目标成本",'实际成本']
          },
          tooltip: {},
          xAxis: {
              data: ["一", "二", "三", "四"]
          },
          yAxis:{},
          color:['#71afe8','#f9d449'],
          series: [{
              name: '目标成本',
              type: 'bar',
              data: [5, 20, 36, 10],
          },{
            name:'实际成本',
            type: 'bar',
            data:[11,3,22,12]
        }]
      });
      //表2
      var ChartLine = echarts.init(document.getElementById("Pgraph"));
    ChartLine.setOption({
      legend: {
        data:['盈利率','节盛','上调比例'],
      },
      tooltip: {},
      xAxis:{
         data: [201801, 201802, 201803, 201804, 201805, 201806]
      },
      yAxis:{},
      color:['#fbd830','#46e2e2','#38a3d6'],
      series:[{
        name:'盈利率',
        type:'line',
        data:[11,14,20,13,12,15],
        markPoint: {
            data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
            ]
        },
        markLine:{
            data:[
                {type:'average',name:'平均值',itemStyle:{
                    normal:{
                        color:'blue'
                    }
                }}
            ]
        }
      },{
        name:'节盛',
        type:'line',
        data:[12,33,24,54,23,26]
      },{
        name:'上调比例',
        type:'line',
        data:[12,13,23,22,13,25]
      }]
    });
  }
  
//颜色fca834 fce851 82bbf0 82bbf0 f76d7d 
//背景：fafafa，字体：橙色e89724，黑色676767 红色f90608 
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <div  className="header-content">
            <img src={require("./images/11.png")} className="header-logo"/>
            <select className="select-y">
              <option>演示工程局</option>
              <option>演示工程局1</option>
              <option>演示工程局2</option>
              <option>演示工程局3</option>
            </select>
            <div className="ico-person">
              <Icon type="user-add" />
            </div>
            <select className="select-j">
              <option>张文(演示工程局建造全角色)</option>
            </select>
            <div className="ico-head">
              <Icon type="bell"/>
            </div>
            <div className="ico-head">
              <Icon type="search" />
            </div>
          </div>
        </header>
        <div style={{height:"60px"}}></div>
        <div className="content">
          <div className="Nav" style={this.state.NavHide}>
            <div className="FixLogo"><img src={require("./images/10.png")} className="Page-logo" /></div>
            <div className="FixLogoed"></div>
            <ul className="List" >
              <li>
                <Icon type="skin" style={{padding:10}}/>
                <span className="icof">个人中心</span>
              </li>
              <li>
                <Icon type="smile-o" style={{padding:10}} />
                <span className="icof">客户管理</span>
                <Icon type={this.state.NavIcoType1} style={{float:"right",margin:"8px 10px 0 0",cursor:"pointer"}} onClick={this.handelNavItemControlClick1.bind(this)}/>
                <ul style={this.state.NavItem1Style}>
                  <li>1111111</li>
                  <li>2222222</li>
                </ul>
              </li>
              <li>
                <Icon type="smile" style={{padding:10}}  />
                <span className="icof">项目跟踪管理</span>
                <Icon type={this.state.NavIcoType2} style={{float:"right",margin:"8px 10px 0 0",cursor:"pointer"}} onClick={this.handelNavItemControlClick2.bind(this)}/>
                <ul style={this.state.NavItem2Style}>
                  <li>1111111</li>
                  <li>2222222</li>
                </ul>
              </li>
              <li>
                <Icon type="inbox" style={{padding:10}}  />
                <span className="icof">投标管理</span>
                <Icon type={this.state.NavIcoType3} style={{float:"right",margin:"8px 10px 0 0",cursor:"pointer"}} onClick={this.handelNavItemControlClick3.bind(this)}/>
                <ul style={this.state.NavItem3Style}>
                  <li>1111111</li>
                  <li>2222222</li>
                </ul>
              </li>
              <li>
                <Icon type="laptop" style={{padding:10}}  />
                <span className="icof">项目组建管理</span>
                <Icon type={this.state.NavIcoType4} style={{float:"right",margin:"8px 10px 0 0",cursor:"pointer"}} onClick={this.handelNavItemControlClick4.bind(this)}/>
                <ul style={this.state.NavItem4Style}>
                  <li>1111111</li>
                  <li>2222222</li>
                </ul>
              </li>
              <li>
                <Icon type="appstore" style={{padding:10}}  />
                <span className="icof">计划目标管理</span>
                <Icon type={this.state.NavIcoType5} style={{float:"right",margin:"8px 10px 0 0",cursor:"pointer"}} onClick={this.handelNavItemControlClick5.bind(this)}/>
                <ul style={this.state.NavItem5Style}>
                  <li>1111111</li>
                  <li>2222222</li>
                </ul>
              </li>
              <li>
                <Icon type="appstore-o" style={{padding:10}}  />
                <span className="icof">主合同管理</span>
                <Icon type={this.state.NavIcoType6} style={{float:"right",margin:"8px 10px 0 0",cursor:"pointer"}} onClick={this.handelNavItemControlClick6.bind(this)}/>
                <ul style={this.state.NavItem6Style}>
                  <li>1111111</li>
                  <li>2222222</li>
                </ul>
              </li>
              <li>
                <Icon type="tags" style={{padding:10}}  />
                <span className="icof">分包合同管理</span>
                <Icon type={this.state.NavIcoType7} style={{float:"right",margin:"8px 10px 0 0",cursor:"pointer"}} onClick={this.handelNavItemControlClick7.bind(this)}/>
                <ul style={this.state.NavItem7Style}>
                  <li>1111111</li>
                  <li>2222222</li>
                </ul>
              </li>
              <li>
                <Icon type="cloud-o" style={{padding:10,paddingBottom: 30}}  />
                <span style={{paddingBottom:20}}>项目关闭管理</span>
                <Icon type={this.state.NavIcoType8} style={{float:"right",margin:"8px 10px 0 0",cursor:"pointer"}} onClick={this.handelNavItemControlClick8.bind(this)}/>
                <ul style={this.state.NavItem8Style}>
                  <li>1111111</li>
                  <li>2222222</li>
                </ul>
              </li>
            </ul>
          </div>
          <div className="Nav-control" onClick={this.handelNavControlClick.bind(this)}><Icon type="right" style={{color:"#c0cccc",verticalAlign:'middle',display:'inline-block',lineHeight:'30px',textAlign:'center',fontSize:'10px'}}/></div>
          <div className="right" style={this.state.ListWid}>
            <div className="fisrt-line">
              <ul>
                  <li className="forWai" style={this.state.FirstBoxWidth}><div><Icon type="tablet" style={{padding: "25px 0 10px 0",fontSize:"30px"}}/></div><p>对外签证台账</p></li>
                  <li className="backM" style={this.state.FirstBoxWidth}><div><Icon type="heart" style={{padding: "25px 0 10px 0",fontSize:"30px"}}/></div><p>计量与进度款回收</p></li>
                  <li className="create" style={this.state.FirstBoxWidth}><div><Icon type="heart-o" style={{padding: "25px 0 10px 0",fontSize:"30px"}}/></div><p>建造合同交底</p></li>
                  <li className="InM" style={this.state.FirstBoxWidth}><div><Icon type="pay-circle-o" style={{padding: "25px 0 10px 0",fontSize:"30px"}}/></div><p>对内实际合同收入</p></li>
                  <li className="IprojP" style={this.state.FirstBoxWidth}><div><Icon type="pay-circle" style={{padding: "25px 0 10px 0",fontSize:"30px"}}/></div><p>建造补充协议</p></li>
                  <li className="add"><div><Icon type="plus" style={{padding: "24px 0 10px 0",fontSize:"50px"}}/></div></li>
              </ul>
            </div>
            <div style={{clear:'both'}}></div>
            <div className="second-line">
              <ul>
                  <li style={this.state.SecondBoxWidth}><p>审批</p><p>1</p></li>
                  <li style={this.state.SecondBoxWidth}><p>预警</p><p>0</p></li>
                  <li style={this.state.SecondBoxWidth}><p>新闻</p><p>34181</p></li>
                  <li style={this.state.SecondBoxWidth}><p>提醒</p><p>3</p></li>
                  <li style={this.state.SecondBoxWidth}><p>任务</p><p>6</p></li>
              </ul>
            </div>
            <div style={{clear:'both'}}></div>
            <div className="third-line">
              <ul>
                <li style={this.state.ThirdBoxWidth}>
                  <div><p>专业分包合同</p><p>5338.67</p><span>/万元</span></div>
                  <div><p>目标成本</p><p>0.1</p><span>/万元</span></div>
                </li>
                <li style={this.state.ThirdBoxWidth}>
                  <div><p>专业分包结算总额</p><p>1735.95</p><span>/万元</span></div>
                  <div><p>实际成本</p><p>3.6</p><span>/万元</span></div>
                </li>
                <li style={this.state.ThirdBoxWidth}>
                  <div><p>分包签证总额</p><p>139.31</p><span>/万元</span></div>
                  <div><p>盈利额</p><p style={{color:"#f00"}}>-3.95</p><span>/万元</span></div>
                </li>
                <li style={this.state.ThirdBoxWidth}>
                  <div><p>自行产值</p><p>13000</p><span>/万元</span></div>
                  <div><p>节超额</p><p style={{color:"#f00"}}>-3.5</p><span>/万元</span></div>
                </li>
              </ul>
            </div>
            <div style={{clear:"both"}}></div>
            <div className="Forth-line">
              <div className="Bgraph" >
                <p style={{fontSize:"16px",margin:"16px 0 0 20px"}}>开累节超分析</p>
                <div id="Bgraph" style={{width:"100%",height:"400px"}}></div>
              </div> 
              <div className="Pgraph" >
                <p style={{fontSize:"16px",margin:"16px 0 0 20px"}}>项目亏盈分析</p>
                <div id="Pgraph" style={{width:"100%",height:"400px"}}></div>
              </div>
            </div>
            <div style={{clear:"both"}}></div>
          </div>
          <div style={{clear:"both"}}></div>
        </div>
        <div style={{clear:"both"}}></div>
      </div>
    );
  }
}
